<template>
  <view class="pages">
    <view class="account-wrap w100">
      <view class="account-list">
        <view class="item" v-for="item in lists">
          <view class="info" @click="select(item)">
            <view class="name">{{item.name}}</view>
            <view class="text">
              <image src="/static/my/mobile.png"></image><text>{{item.mobile}}</text>
            </view>
            <view class="text w100" v-if="item.type == 1">
              <image src="/static/my/account.png"></image><text>{{item.accountnumber}}</text>
            </view>
            <view class="text w100" v-if="item.type==1">
              <image src="/static/my/real.png"></image><text>{{item.card}}</text>
            </view>
          </view>
          <view class="edit"
            @click="$to('/pages/my/paymentAccount/edit',{type:item.type,id:item.id,name:item.name,mobile:item.mobile,accountnumber:item.accountnumber,card:item.card})">
            <u-icon name="edit-pen-fill" size="50"></u-icon>
          </view>
        </view>
      </view>
      <view class="confirm">
        <u-button type="primary" @click="$to('/pages/my/paymentAccount/edit')">新增收款账号</u-button>
      </view>
    </view>
  </view>
</template>

<script>
  export default {
    data() {
      return {
        lists: [],
        infoType: '',
      }
    },
    onLoad(option) {
      if (option.infoType) {
        this.infoType = option.infoType
      }
    },
    onShow() {
      this.getList()
    },
    methods: {
      async getList() {
        const res = await this.$http('/user/paymentlist')
        this.lists = res.list
      },
      // 选择地址
      select(item) {
        if (!this.infoType) return
        let obj = {
          infoType: this.infoType,
          type: item.type,
          name: item.name,
          mobile: item.mobile,
          accountnumber: item.accountnumber,
        }
        if (item.type == 1) {
          obj.card = item.card
        }
        let pages = getCurrentPages()
        let prevPage = pages[pages.length - 2]
        prevPage.$vm.selectAccount(obj)
        uni.navigateBack({
          delta: 1
        })
      }

    },
  }
</script>

<style lang="scss" scoped>
  .pages {
    background: linear-gradient(#cce4fb, #f0f4fa);
    padding: 16rpx 16rpx calc(16rpx + #{$safe});
  }

  .account-wrap {
    border-radius: 16rpx;
    background-color: #fff;
    box-sizing: border-box;
    min-height: calc(100vh - 32rpx - #{$safe});
    position: relative;
    padding: 0rpx 30rpx;
  }

  .account-list {
    .item {
      display: flex;
      align-items: center;
      line-height: 66rpx;
      padding: 18rpx 0;
      border-bottom: 1rpx dotted #cce4fb;

      .info {
        width: 600rpx;
        display: flex;
        align-items: center;
        flex-wrap: wrap;

        .name {
          width: 50%;
          font-size: 30rpx;
        }

        .text {
          width: 50%;
          display: flex;
          align-items: center;

          image {
            width: 30rpx;
            height: 30rpx;
            margin-right: 6rpx;
          }
        }
      }

      .edit {
        padding-left: 16rpx;
      }

    }
  }

  .confirm {
    position: absolute;
    bottom: 34rpx;
    left: 34rpx;
    right: 34rpx;

    ::v-deep .u-button {
      border-radius: 80rpx;
    }
  }

  ::v-deep .u-input {
    padding: 2px 9px !important;
    background-color: #f4f8ff !important;
  }

  ::v-deep .u-border {
    border-color: #f4f8ff !important;
  }

  ::v-deep input,
  ::v-deep textarea {
    font-size: 24rpx !important;
  }
</style>
